<style scoped lang="less">
	.desc {
		padding: 5vh 2vw;
		background: white;
		font-size: 0.4rem;
		margin-top: 1vh;
	}
	.title {
		font-size: 0.45rem;
		margin-bottom: 2vh;
	}
	p.content-item {
		text-align: left;
		padding: 2vw 0;
		line-height: 1.5;
	}
	.radio-item.van-radio {
		padding: 2vw 0;
	}
	button.btn-submit {
		margin-top: 5vh;
	}
</style>
<template>
	<div v-if="orderData!=null">
		<van-steps :active="step">
			<van-step>发起退款</van-step>
			<van-step>待微信处理</van-step>
			<van-step>退款成功</van-step>
		</van-steps>
		<!--		目前只允许当订单过期未使用时可以退款-->
		<div class="desc" v-if="orderData.trade_status===GLOBAL.ORDER_STATUS_EXPIRE&&orderData.pay_status===GLOBAL.PAY_STATUS_PAID_ONLINE">
			<div class="title">退款说明</div>
			<div class="desc-content">
				<p class="content-item">1、直接退款到余额将退还100%，余额可直接用于购买其它商品。</p>
				<p class="content-item">2、原路退回将扣除{{100-orderData.refund_percentage}}%的手微信支付手续费。</p>
			</div>
			<van-radio-group v-model="type">
				<van-radio class="radio-item" v-for="item in types" :key="item.name" :name="item.name" checked-color="#07c160">{{item.str}}
				</van-radio>
			</van-radio-group>
			<van-button class="btn-submit" plain type="primary" :loading="loading" @click="toRefund">提交退款申请</van-button>
		</div>
	</div>

</template>
<script>
  //退款类型
  const REFUND_TO_WALLET = 1;//退到余额
  const REFUND_TO_ORIGINAL = 0;//原路退回
  import {refund, getRefundData} from '@/api/order';
  import Vue from 'vue';
  import {Button, RadioGroup, Radio, Step, Steps, Dialog, Toast} from 'vant';

  Vue.use(Button).use(Radio).use(RadioGroup).use(Dialog).use(Step).use(Steps).use(Toast);
  export default {
    name: 'refund',
    data() {
      return {
        type: REFUND_TO_WALLET,
        types: [{name: REFUND_TO_WALLET, str: '退回余额'}, {name: REFUND_TO_ORIGINAL, str: '原路退回'}],
        order_id: null,
        step: 0,
        loading: false,
        orderData: null
      };
    },
    created() {
      this.order_id = this.$route.params.order_id;
      this.getOrderData();
    },
    methods: {
      toRefund() {
        let vm = this;
        Dialog.confirm({
          title: '提示',
          message: '您确认申请退款吗？'
        }).then(() => {
          vm.loading = true;
          refund(vm.order_id, vm.type).then(rep => {
            vm.getOrderData();
            vm.loading = false;
            Toast({
              type: 'success',
              message: '提交成功',
              onClose: () => {
              }
            })
          }, error => {
            vm.loading = false;
          })
        }).catch(() => {
          // on cancel
        });
      },
      getOrderData() {
        let vm = this;
        getRefundData(vm.order_id).then(rep => {
          vm.orderData = rep.data.data;
          if (vm.orderData.pay_status === vm.GLOBAL.PAY_STATUS_WAIT_REFUND) {
            vm.step = 1;
          } else if (vm.orderData.pay_status === vm.GLOBAL.PAY_STATUS_REFUNDED) {
            vm.step = 2;
          }
        })
      }
    }
  }
</script>